<template>
    <view>
        <div style="height: 44px;background-color: #fff;width:100%"></div>
        <up-navbar :safeAreaInsetTop="false" title="修改产品" :fixed="false" rightText="完成"   style="color: #007AFF;"  @rightClick="confirmProduct"

            @leftClick="uni.navigateBack()" border="true" />
        <div class="cell1">
            <div class="tit1">产品名称</div>
            <div class="cell_content" @tap="showPicker = true">
                <up-input placeholder="选择产品后自动填充" border="false" @change="change" disabled disabledColor="#fff"
                    v-model="productName"></up-input>
            </div>
        </div>

        <div class="cell1">
            <div class="tit1">指导标价</div>
            <div class="cell_content">
                <up-input placeholder="选择产品后自动填充" border="false" @change="change" disabled disabledColor="#fff"
                    v-model="guidePrice"></up-input>
            </div>
        </div>
        <div class="cell1">
            <div class="tit1">指导业绩</div>
            <div class="cell_content">
                <up-input placeholder="选择产品后自动填充" border="false" @change="change" disabled disabledColor="#fff"
                    v-model="guideAchievement"></up-input>
            </div>
        </div>

        <div class="cell1">
            <div class="tit1">产品格豆</div>
            <div class="cell_content">
                <up-input placeholder="选择产品后自动填充" border="false" @change="change" disabled disabledColor="#fff"
                    v-model="beans"></up-input>
            </div>
        </div>

        <div class="cell1">
            <div class="tit1">产品备注</div>
            <div class="cell_content">
                <up-input placeholder="" border="false" @change="change" disabled disabledColor="#fff"
                    v-model="remark"></up-input>
            </div>
        </div>
        <div class="cell" style="border-top: 1px solid rgba(239, 239, 239, 1);">
            <div class="tit">门店标价</div>
            <div class="cell_content">
                <up-input placeholder="请输入" border="false" disabledColor="#fff"
                    v-model="busPrice"></up-input>
            </div>
        </div>

        <div class="cell">
            <div class="tit">门店业绩</div>
            <div class="cell_content">
                <up-input placeholder="请输入" border="false"  disabledColor="#fff"
                    v-model="busAchievement"></up-input>
            </div>
        </div>
  <div class="cell">
            <div class="tit">是否在售</div>
            <div class="cell_content">
                 <div style="color:#333;font-size: 16px;margin-left:15rpx" @tap="showPicker=true">{{ isSale == '0' ? '是' : '否' }} </div>
            </div>
        </div>

        <up-picker  @close="showPicker=false" :show="showPicker" :columns="columns" closeOnClickOverlay="true" @cancel="showPicker = false"
         @confirm="(e)=>{
            isSale = e.value[0] == '是' ? '0' : '1' ; showPicker=false
         }"
         style="color: #333;"
        ></up-picker>

    </view>
</template>

<script setup>
import { ref } from 'vue'
import { onShow, onLoad } from '@dcloudio/uni-app';
import { getUserProductList, addProductList } from '../../utils/product'

// 定义产品数据变量
const productData = ref({})
const columns = ref([['是','否']])
const productName = ref('')
const showPicker = ref(false)
const remarks  =ref('')
const beans  = ref('')
const busAchievement = ref('')
const busPrice = ref('')
const guideAchievement = ref('')
const guidePrice = ref('')
const isSale = ref('0')
// 生命周期函数，用于接收路由参数
onLoad((options) => {
    if (options.item) {
        // 解码并解析JSON字符串
        const item = JSON.parse(decodeURIComponent(options.item))
        productData.value = item
        console.log('接收到的产品数据:', productData.value)
        guidePrice.value = productData.value.guidePrice
        guideAchievement.value = productData.value.guideAchievement
        productName.value = productData.value.productName
        beans.value = productData.value.beans
        remarks.value = productData.value.remarks
        busPrice.value = productData.value.busPrice
        busAchievement.value = productData.value.busAchievement
        isSale.value = productData.value.isSale
    }
})

const confirmProduct =async ()=>{
    console.log(productData.value)
     if (productName.value == '' || busPrice.value == '' || busAchievement.value == '') {
		uni.showToast({
			title: '请填写完整信息',
			icon: 'none',
			duration: 2000
		})
		return
	}

	try {
		const res = await addProductList({
			businessId: uni.getStorageSync('businessId'),
			productName: productName.value,
			productId: productData.value.productId,
			busPrice: busPrice.value,
			busAchievement: busAchievement.value,
            busProId:productData.value.busProId,
            isSale:isSale.value,
		})
		console.log(res)
		uni.showToast({
			title: '修改成功',
			icon: 'success',
			duration: 2000
		})
		uni.navigateTo({
			url: '/pages/product/product'
		})
	} catch (e) {

	}
}
</script>

<style lang="scss" scoped>
	page {
		overflow-x: hidden;
		box-sizing: border-box;
	}
	
	/* 隐藏横向滚动条 */
	::-webkit-scrollbar {
		display: none;
	}
	
	* {
		-ms-overflow-style: none;
		scrollbar-width: none;
	}
.u-navbar__content__right {
     color: aqua !important;
}
.cell {
    width: 100%;
    padding: 20rpx;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(239, 239, 239, 1);
   box-sizing: border-box;

    .tit1 {
        color: rgb(16, 16, 16);
        font-size: 32rpx;
        text-align: left;
        font-family: PingFangSC-regular;
        position: relative;
        padding-left: 24rpx;
    }

    .tit {
        color: rgb(16, 16, 16);
        font-size: 32rpx;
        text-align: left;
        font-family: PingFangSC-regular;
        position: relative;
        padding-left: 24rpx;

        &:before {
            content: '*';
            position: absolute;
            left: 0;
            top: 60%;
            transform: translateY(-50%);
            color: #ff0000;
            font-size: 32rpx;
        }
    }

    .cell_content {
        width: 100%;
        flex: 1;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-left: 20rpx;
        padding-right: 40rpx;
        font-size: 32rpx;
        color: #333;
    }
}

.cell1 {
    width: 100%;
    padding: 20rpx;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    .tit1 {
        color: rgb(16, 16, 16);
        font-size: 32rpx;
        text-align: left;
        font-family: PingFangSC-regular;
        position: relative;
        padding-left: 24rpx;
    }

    .tit {
        color: rgb(16, 16, 16);
        font-size: 32rpx;
        text-align: left;
        font-family: PingFangSC-regular;
        position: relative;
        padding-left: 24rpx;

        &:before {
            content: '*';
            position: absolute;
            left: 0;
            top: 60%;
            transform: translateY(-50%);
            color: #ff0000;
            font-size: 32rpx;
        }
    }

    .cell_content {
        width: 100%;
        flex: 1;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-left: 20rpx;
        padding-right: 40rpx;
        font-size: 32rpx;
    }
}
</style>
